<template>
  <div v-loading="loading">
    <MciTable :data="tableData" :max-height="480">
      <MciTableColumn label="城市" prop="city" :formatter="formatterCity" />
      <MciTableColumn label="总进件数" prop="total" />
      <MciTableColumn label="进件比例" prop="ratio" :formatter="formatterRatio" />
    </MciTable>
    <MciPagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 30, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MciTable, MciTableColumn, MciPagination } from '@/components/base';
import { getFlowResultSummaryByCity } from '@/api/decision-engine';
import type { IGetFlowResultSummaryByCityReq, IGetFlowResultSummaryByCityRes } from '@/api/decision-engine';
import { accMul } from '@/utils/math';

const props = defineProps({
  flowId: { type: String, required: true, default: null },
  dataSource: { type: Array, required: true, default: [] }
});
// 表格
const loading = ref(false);
const allData = ref<any[]>([]);
const tableData = ref<any[]>([]);
const paramsFlowId = ref('');
// 翻页
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const pageTotal = ref(0);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  // tableRequest();
  const startIndex = 0;
  tableData.value = allData.value.slice(startIndex, pageSize.value);
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  // tableRequest();
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  tableData.value = allData.value.slice(startIndex, endIndex);
};
// 表格数据
const tableRequest = async () => {
  loading.value = true;
  const params: IGetFlowResultSummaryByCityReq = {
    flowIds: paramsFlowId.value
  };
  try {
    const data: IGetFlowResultSummaryByCityRes = await getFlowResultSummaryByCity(params);

    if (data) {
      allData.value = data || [];
      // 根据当前页码和每页大小计算开始和结束索引
      const startIndex = (currentPage.value - 1) * pageSize.value;
      const endIndex = startIndex + pageSize.value;
      tableData.value = allData.value.slice(startIndex, endIndex);
      pageTotal.value = data.length;
    }

    // if (data && data.currentPage === currentPage.value) {
    //   tableData.value = data.list || [];
    //   pageTotal.value = data.total || 0;
    // }
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 300);
  }
};

watch(
  () => [props.flowId, props.dataSource],
  () => {
    if (props.dataSource) {
      paramsFlowId.value = props.flowId;
      allData.value = props.dataSource || [];
      // 根据当前页码和每页大小计算开始和结束索引
      const startIndex = (currentPage.value - 1) * pageSize.value;
      const endIndex = startIndex + pageSize.value;
      tableData.value = allData.value.slice(startIndex, endIndex);
      pageTotal.value = props.dataSource.length;
    }
  },
  { immediate: true, deep: true }
);

const formatterRatio = (row: any) => {
  if (row && row.ratio) {
    const percent = accMul(row.ratio, 100);
    return (percent? percent.toFixed(2): 0) + '%';
  }
  return '0';
};

const formatterCity = (row: any) => {
  if (row && row.city) {
    return row.city;
  }
  return '--';
};

defineExpose({
  tableRequest
});
</script>
